<template>
	<view>
		<!-- 头部内容区 -->
		<view class="card acea-row row-column">
			<view class="circle"></view>
			<view class="font24 col_ff rule" >提现规则</view>
				<view class="top acea-row col_ff row-between row-middle">
				<view class="left acea-row row-column">
					<text class="font28 col_ff mb_24">可提现的金额(元)</text>
				     <view class="bottom  col_ff">
					    ￥<text class="font60 font-w600">9,200.00</text>
				     </view>
				</view>
				<view class="font28 cash_btn" @click="toCash">提现</view>
				</view>
			<view class="info acea-row  row-between ">
		     <view class="tipbox acea-row row-column">
		     	<text class="mb_24">昨日收益(元)</text>
		     	<text class="red font36 font-w600">58.42</text>
		     </view>
			 <view class="tipbox acea-row row-column row-middled">
			 	<text class="mb_24">累计收益(元)</text>
			 	<text class="red font36 font-w600">58.42</text>
			 </view>
			 <view class="tipbox acea-row row-column row-middle">
			 	<text class="mb_24">金币收益(元)</text>
			 	<text class="red font32 font-w600"><text class="red font36">1800≈</text>180元</text>
			 </view>
			</view>
		</view>
		<view class="types acea-row row-between">
			<text :class="[activeIdx==0?'red':'','font32']" @click="change(0)">已提现</text>
			<text :class="[activeIdx==1?'red':'','font32']" @click="change(1)">即将入账</text>
			<text :class="[activeIdx==2?'red':'','font32']" @click="change(2)">已入账</text>
			<text :class="[activeIdx==3?'red':'','font32']" @click="change(3)">全部</text>
		</view>
		<!-- 列表数据 -->
		<view class="box acea-row row-column">
		<view class="list acea-row row-between row-middle" v-for="item in list">
			<image src="@/static/images/f.png" mode="aspectFill"></image>
			<view class="infos acea-row row-column">
				<text>订单号：3284039759347598</text>
				<text class="gray">下单时间：2020-11-11 15:28:35</text>
				<view class="icon">
					<myProgress :type="item.type"/>
				</view>
			</view>
			<view class="coin col_999 font24">
				<text class="red font36 font-w600">2.64</text>金币
			</view>
		  </view>
		</view>
	</view>
</template>

<script>
	import tabBar from "@/components/tabBar";
	import myProgress from "@/pages/aboutUsers/components/progress";
	import { mapGetters } from "vuex";
	import { toLogin } from '@/libs/login.js';
	export default {
		components: {
			tabBar,
			myProgress
		},
		data() {
			return {
				popupShow: false,
				statusBarHeight: 0,
				activeIdx: 0,
				surplus: 0,
				cash_num: "",
				isWeixin: true,
				list: [{type:1},{type: 3}]
			}
		},
		computed: {
			...mapGetters(['isLogin']),
		},
		onLoad() {},
		methods: {
			toCash() {
				let url = '/pages/user/index';
				wx.navigateTo({
					url
				});
			},
			closePop() {
				this.popupShow = false
			},
			bindCode(e) {
				this.cash_num = e
			},
			change(num) {
				this.activeIdx = num;
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f8fa;
	}
	.mb_24 {
		margin-bottom: 24rpx;
	}
	.col_ff {
		color: #fff;
	}

	.col_00 {
		color: #000;
	}

	.col_38 {
		color: #383838;
	}

	.red {
		color: #EE212D;
	}

	.gray {
		color: #A6A6A6;
	}

	.font22 {
		font-size: 22rpx;
	}

	.font32 {
		font-size: 32rpx;
	}

	.font36 {
		font-size: 36rpx;
	}

	.font60 {
		font-size: 60rpx;
	}

	.col_999 {
		color: #999;
	}
    .font-w600 {
		font-weight: 600;
	}
	.mr10 {
		margin-right: 10rpx;
	}
	.rule {
		position: absolute;
		right: 34rpx;
		top: 20rpx
	}
	.card {
		position: relative;
		padding: 60rpx 34rpx 0;
		height: 380rpx;
		width: 100%;
		z-index: 1;
		// overflow-x: hidden;
		.circle {
			position: absolute;
			top: 0 ;
			left: 50%;
			z-index: -1;
			transform: translateX(-50%);
			width: 150%;
			height: 100%;
			border-bottom-left-radius: 100%;
			border-bottom-right-radius: 100%;
			background: linear-gradient(107.59deg, #FF2605 0%, #EE212D 100%);
		}
		.top {
			margin: 40rpx 0 15rpx;
		}
	}
	.info {
		position: absolute;
		background-color: #fff;
		bottom: -100rpx;
		width: 690rpx;
		height: 196rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 46rpx 32rpx 47rpx;
		box-shadow: 0px 3px 6px 0px #B1B1B1;
		left: 50%;
		transform: translateX(-50%);
	}
	.box {
		margin-top: 40rpx;
	}
	.list {
		width: 690rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 0 auto 24rpx;
		box-sizing: border-box;
		padding: 40rpx 24rpx;
		flex-wrap: nowrap;
		image {
			width: 130rpx;
			height: 110rpx;
			border-radius: 10rpx;
			margin-right: 12rpx;
		}
		.infos {
			flex: 1;
			word-break: break-all;
			.icon {
				margin-top: 8rpx;
				width: 100%;
			}
		}
		.coin {
			text-align: right;
			min-width: 140rpx;
			margin-left: 12rpx;
		}
	}
	.types {
		position: relative;
		width: 690rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 28rpx 32rpx;
		background-color: #FFFFFF;
		margin: 146rpx auto 46rpx;
	}
	.cash_line {
		height: 70rpx;
		border-bottom: 2rpx solid #eee;
		padding-bottom: 5rpx;
	}
	.cash_ipt {
		flex: 1;
		font-size: 38rpx;
		color: #333;
		padding-left: 10rpx;
	}
	.cash_btn {
		width: 153rpx;
		height: 60rpx;
		text-align: center;
		line-height: 56rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		border: 2rpx solid #FFFFFF;      
	}
	.btn {
		width: 692rpx;
		height: 85rpx;
		line-height: 85rpx;
		text-align: center;
		color: #fff;
		margin: 184rpx auto 0;
		border-radius: 5px;
		background: #EE212D;
	}
	
</style>
